/* 登录页面 */
import React from 'react';
import { connect } from 'dva';
import { browserHistory } from 'dva/router';
import { Layout, Icon, Form, Input, Button, Checkbox } from 'antd';

import HeaderLayout from '../../../components/layout/IndexHeaderLayout';
import FooterLayout from '../../../components/layout/IndexFooterLayout';

import configs from '../../../utils/configs';

const { Content } = Layout;
const FormItem = Form.Item;

const NormalLoginForm = Form.create()(React.createClass({

  getInitialState() {
    return {
      captchaUrl: configs.captchaUrl,
    };
  },

  clickCaptcha() {
    this.setState({ captchaUrl: configs.captchaUrl + Math.random() });
  },

  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (values.userName === 'admin') {
          browserHistory.push('/admin/home');
        } else {
          this.props.form.setFields({
            userName: {
              value: values.userName,
              errors: [new Error('账号请输入‘admin’,已进行登录!')],
            },
          });
        }
      }
    });
  },
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} style={{ maxWidth: '240px' }}>
        <p style={{ textAlign: 'center', fontSize: 16 }}>
          <span style={{ fontSize: 22 }}> { configs.osName } </span>
          后台系统
        </p>
        <br />
        <FormItem>
          {getFieldDecorator('userName', {
            rules: [
              { required: true, message: '请输入您的账号!' },
              { min: 5, message: '至少填写 5 个字符!' },
            ],
          })(
            <Input addonBefore={<Icon type="user" />} placeholder="请输入账号" />,
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入您的密码!' }],
          })(
            <Input addonBefore={<Icon type="lock" />} type="password" placeholder="请输入密码" />,
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('captcha', {
            rules: [{ required: true, message: '请输入右侧验证码!' }],
          })(
            <Input
              addonBefore={<Icon type="qrcode" />}
              addonAfter={
                <img
                  src={this.state.captchaUrl}
                  onClick={this.clickCaptcha}
                  className="admin-login-captcha"
                  alt="验证码" title="点击刷新"
                />
              }
              placeholder="请输入右侧验证码"
            />,
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(
            <Checkbox>记住我</Checkbox>,
          )}
          <a style={{ float: 'right' }}>忘记密码</a>
          <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
            登录
          </Button>
          或者 <a>马上注册!</a>
        </FormItem>
      </Form>
    );
  },
}));

function LoginPage() {
  return (
    <Layout style={{ minWidth: '1200px' }}>
      <HeaderLayout />
      <Content className="index-content" style={{ padding: '20px' }}>
        <div style={{ float: 'right', marginTop: 50 }}><NormalLoginForm /></div>
      </Content>
      <FooterLayout />
    </Layout>
  );
}

export default connect()(LoginPage);
